<template>
  <el-menu router active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" :default-active="defaultActive"
    text-color="#fff" @open="handleOpen" @close="handleClose">
    <div class="logo">
      <span class="title">超级市场</span>
    </div>
    <section v-for="item in dynamicRouter" :key="item.path">
      <el-sub-menu v-if="item.children?.length" :index="item.path">
        <template #title>
          <el-icon v-if="item.meta?.icon">
            <component :is="mapIcons[item.meta?.icon as string]"></component>
          </el-icon>
          <span>{{ item.meta?.title }}</span>
        </template>
        <!-- 递归组件 -->
        <MenuItem :data="item.children"></MenuItem>
      </el-sub-menu>
      <el-menu-item v-else :index="item.path">
        <el-icon v-if="item.meta?.icon">
          <component :is="mapIcons[item.meta?.icon as string]"></component>
        </el-icon>
        <span>{{ item.meta?.title }}</span>
      </el-menu-item>
    </section>
  </el-menu>
</template>

<script setup lang="ts">
import {
  Menu as IconMenu,
  User,
  ShoppingBag,
  Picture,
  Notebook,
  Platform
} from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import MenuItem from './MenuItem.vue'
import { dynamicRouter } from '@/router'

const mapIcons: any = {
  'icon-menu': IconMenu,
  'User': User,
  'ShoppingBag': ShoppingBag,
  'Picture': Picture,
  'Notebook': Notebook,
  'Platform': Platform
}

const route = useRoute()
console.log(route.path)

const defaultActive = route.path

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
</script>

<style scoped>
.logo{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 60px;
  background-color: #1C8AE7;
  font-weight: bold;
  font-size: 20px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
</style>